import {Component, OnInit} from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'ngx-parallel-aqi',
  templateUrl: './parallel-aqi.component.html',
  styleUrls: ['../index.component.css']
})
export class ParallelAqiComponent implements OnInit {

  options: any = {};
  dataBJ = [
    [1, 55, 9, 56, "良"],
    [2, 25, 11, 21, "优"],
    [3, 56, 7, 63, "良"],
    [4, 33, 7, 29,"优"],
    [5, 42, 24, 44, "优"],
    [6, 82, 58, 90,"良"],
    [7, 74, 49, 77, "良"],
    [8, 78, 55, 80, "良"],
    [9, 267, 216, 280, "差"],
    [10, 185, 127, 216, "差"],
    [11, 39, 19, 38, "优"],
    [12, 41, 11, 40, "优"],
    [13, 64, 38, 74, "良"],
    [14, 108, 79, 120, "差"],
    [15, 108, 63, 116, "差"],
  ];
  dataGZ = [
    [1, 26, 37, 27, "优"],
    [2, 85, 62, 71, "良"],
    [3, 78, 38, 74, "良"],
    [4, 21, 21, 36, "优"],
    [5, 41, 42, 46, "优"],
    [6, 56, 52, 69, "良"],
    [7, 64, 30, 28,"良"],
    [8, 55, 48, 74,"良"],
    [9, 76, 85, 113, "良"],
    [10, 91, 81, 104,  "良"],
  ];
  dataSH = [
    [1, 91, 45, 125, "良"],
    [2, 65, 27, 78, "良"],
    [3, 83, 60, 84, "良"],
    [4, 109, 81, 121,  "差"],
    [5, 106, 77, 114, "差"],
    [6, 109, 81, 121,  "差"],
    [7, 106, 77, 114, "差"],
    [8, 89, 65, 78, "良"],
    [9, 53, 33, 47, "良"],
    [10, 80, 55, 80, "良"],
    [11, 117, 81, 124, "差"],
    [12, 99, 71, 142, "良"],
    [13, 95, 69, 130, "良"],
    [14, 116, 87, 131, "差"],
    [15, 108, 80, 121, "差"],
  ];
  schema = [
    {name: 'date', index: 0, text: '日期'},
    {name: 'elec', index: 1, text: '用电'},
    {name: 'water', index: 2, text: '用水'},
    {name: 'gas', index: 3, text: '燃气'},
    {name: 'level', index: 4, text: '等级'},
  ];

  lineStyle = {
    normal: {
      width: 1,
      opacity: 0.5
    }
  };

  constructor() {
    //console.log(echarts);
  }

  ngOnInit() {

    this.initCharts();

  }

  initCharts() {
    const ec: any = echarts;
    let parallelChart = ec.init(document.getElementById('parallelChart'));
    let parallelChartOption = {
      backgroundColor: '#333',
      legend: {
        bottom: 30,
        data: ['部门1', '部门2', '部门3'],
        itemGap: 20,
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      tooltip: {
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (obj) {
          var value = obj[0].value;
          return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
            + obj[0].seriesName + ' ' + value[0] + '日期：'
            + value[7]
            + '</div>'
            + this.schema[1].text + '：' + value[1] + '<br>'
            + this.schema[2].text + '：' + value[2] + '<br>'
            + this.schema[3].text + '：' + value[3] + '<br>'
            + this.schema[4].text + '：' + value[4] + '<br>';
        }
      },
      // dataZoom: {
      //     show: true,
      //     orient: 'vertical',
      //     parallelAxisIndex: [0]
      // },
      parallelAxis: [
        {dim: 0, name: this.schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
        {dim: 1, name: this.schema[1].text},
        {dim: 2, name: this.schema[2].text},
        {dim: 3, name: this.schema[3].text},
        {
          dim: 7, name: this.schema[4].text,
          type: 'category', data: ['优', '良', '差']
        }
      ],
      visualMap: {
        show: true,
        min: 0,
        max: 150,
        dimension: 2,
        inRange: {
          color: ['#d94e5d', '#eac736', '#50a3ba'].reverse(),
          // colorAlpha: [0, 1]
        }
      },
      parallel: {
        left: '50',
        right: '20',
        bottom: '100',
        parallelAxisDefault: {
          type: 'value',
          name: 'AQI指数',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            color: '#fff',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#aaa'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#777'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        }
      },
      series: [
        {
          name: '部门1',
          type: 'parallel',
          lineStyle: this.lineStyle,
          data: this.dataBJ
        },
        {
          name: '部门2',
          type: 'parallel',
          lineStyle: this.lineStyle,
          data: this.dataSH
        },
        {
          name: '部门3',
          type: 'parallel',
          lineStyle: this.lineStyle,
          data: this.dataGZ
        }
      ]
    };
    parallelChart.setOption(parallelChartOption);
  }

}
